
    		<!--application UI goes here-->
  	
<div id= "allProjects" data-role = "page" data-theme="d">
			
		
		
<div data-role ="header" class ="blue" data-position="fixed" >
 <a id="account_button" href="#accountPanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true">Account Menu</a>
	<h1>Projects </h1>
</div>

<div data-role="content" >   
   
	
	<ul id="project_list" data-role="listview" data-filter="true" data-filter-placeholder="Search projects..." data-inset="true"> 
		<li class = "sample-project-item template" style ="display:none;">
			<a class="project-link" ></a>
		</li>
		<li class= "no-projects template" style="text-align:center;display:none;">No Projects</li> 
	</ul>
	
</div><!-- /content -->

<div data-role ="footer" class="blue" data-position="fixed">
	<a href="AllProjects.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Refresh</a>
	
</div>
<div data-role="panel" data-position-fixed="true" data-theme="a" id="accountPanel" class="ui-responsive-panel">
	       <ul data-role="listview" data-theme="a" class="account-panel">
            
            <li><a href="#">My Projects</a></li>
            <li><a href="#">My Issues</a></li>
            <li><a href="#" onClick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: wlCommonInit()})">Log out</a></li>
       		 <li data-icon="delete"><a href="#" data-rel="close">Cancel</a></li>
        </ul>    
</div>
 <script>
 /*$("#accountPanel").load("AccountPanel.html"); 
 $.mobile.loadPage( "AccountPanel.html", true, {
type: "post",
data: $( "#accountPanel" ).serialize()
});*/
 </script> 
	</div>
